<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

	<div class="wrap_lnb_search">
		<div class="lnb_search top">
	    	<select>
	    		<option>질병</option>
	    		<option>직업</option>
	    	</select>
	    </div>
	</div>
    
    <div class="lnb_list">
    	<ul>
    		<li title="갑상선암">갑상선암</li>
    		<li title="결막염">결막염</li>
    		<li title="고혈압">고혈압</li>
    		<li title="골절">골절</li>
    		<li title="관절염">관절염</li>
    		<li title="급성 신우신염">급성 신우신염</li>
    		<li title="급성 편도염">급성 편도염</li>
    		<li title="뇌수막염">뇌수막염</li>
    		<li title="뇌졸중">뇌졸중</li>
    		<li title="담석증">담석증</li>
    		<li title="당뇨병">당뇨병</li>
    		<li title="대상포진">대상포진</li>
    		<li title="백내장">백내장</li>
    		<li title="복통">복통</li>
    		<li title="수면장애">수면장애</li>
    		<li title="수족구병">수족구병</li>
    		<li title="아토피피부염">아토피피부염</li>
    		<li title="알레르기비염">알레르기비염</li>
    		<li title="염좌">염좌</li>
    		<li title="우울장애">우울장애</li>
    		<li title="위암">위암</li>
    		<li title="위염">위염</li>
    		<li title="자궁근종">자궁근종</li>
    		<li title="접촉성피부염">접촉성피부염</li>
    		<li title="천식">천식</li>
    		<li title="추간판탈출증">추간판탈출증</li>
    		<li title="충수염">충수염</li>
    		<li title="치질">치질</li>
    		<li title="폐렴">폐렴</li>
    		<li title="협심증">협심증</li>
    	</ul>
    </div>
<script type="text/javascript">
$(function(){
	$('.lnb_list > ul > li').tooltip({
	    position: 'right',
	    content: '<span>This is the tooltip message.</span>',
	    onShow: function(){
	        $(this).tooltip('tip').addClass('tip');
	    }
	});
	$('.lnb_list > ul > li').mouseover(function(){
		$(this).addClass('tree-node-hover'); 
	});
	$('.lnb_list > ul > li').mouseout(function(){
		$(this).removeClass('tree-node-hover'); 
	});
	$(".lnb_list > ul > li").click(function(event){
		var current_head = $(this);
		$(this).addClass('tree-node-selected'); 
		$('.lnb_list > ul > li').not(current_head).removeClass('tree-node-selected'); 
	});
});
</script>